AngularJSのviewをもう少し使ってみる&テストを実行

Yeoman&Angular入門

#JavaScript

#Yeoman

#Grunt

#Angular

中村修太

2013.06.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

viewとかテストを試してみる

さて、前回はYeomanでAngularJSアプリのひな形を作成しました。
今回はこれをベースにAngularJSの機能を試していきましょう。

環境構築方法

今回使用した動作環境は前回と同じく、以下のとおりです。
前回を参考に環境をセットアップしてAngularJSのアプリひな形を作成してください。

OS : MacOS X 10.7.5
Node.js : v0.10.8

ついでに、コンソールでserverタスクを実行しておき、ファイルの変更がすぐに反映されるようにしましょう。

% cd /path/your/angularApp
% grunt server

ng-repeatでリスト表示

ここでも説明されていますが、ng-repeatを使うとforルーブのように繰り返し処理を行うことができます。
試しに、views/main.htmlを次のように記述してみましょう。

<div class="hero-unit">
    <h3>try ng-repeat</h3>
    <table>
        <tr><th>row number</th></tr>
        <tr ng-repeat="i in [0, 1, 2, 3, 4, 5]"><td>{{"row:" + (i+1)}}</td></tr>
    </table>
</div>

trタグにng-repeat属性が設定されています。for-inループのように、配列の要素が順番にiに代入され、文字列と結合されて表示されます。

では次に、Controllerで定義したリスト形式のデータを、ul/liタグで繰り返し表示をしてみましょう。
app/scripts/controllers/main.jsにhtmlで表示するための配列を定義します。

'use strict';

angular.module('angApp').controller('MainCtrl', function ($scope) {
    $scope.awsServices = [
        {"name": "EC2",
            "desc": "クラウド内で規模の変更が可能なコンピュータ処理能力を提供するウェブサービス."},
        {"name": "Auto Scaling",
            "desc": "Amazon EC2 の能力を、自動的に拡大縮小する."},
        {"name": "Amazon RDS",
            "desc": "クラウド上でRDBを簡単にセットアップして運用することのできる."}
    ];
});

$scopeのawsServicesにオブジェクト配列を設定しています。
その設定した値を、app/views/main.htmlでng-repeatを使って表示します。

<div class="hero-unit">
    <h3>use ng-repeat</h3>
    <ul>
        <li ng-repeat="service in awsServices">
            {{service.name}}
            <p>{{service.desc}}</p>
        </li>
    </ul>
</div>

htmlとJavaScriptがしっかり分離できていますね。

Karmaでテストを行う

generator-angularでひな形を生成すると、Karmaを用いたテストも同時に生成されます。
テストを記述すればtestタスクでそのまま実行できます。すでにテスト用のtest/spec/controllers/main.jsファイルが生成されていますので、
次のように記述してテストを実行してみましょう。

'use strict';

describe('Controller: MainCtrl', function () {

    // load the controller's module
    beforeEach(module('angApp'));

    var MainCtrl, scope;

    // Initialize the controller and a mock scope
    beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new();
        MainCtrl = $controller('MainCtrl', {
            $scope: scope
        });
    }));

    it('should create "awsServices" model with 3 items', function () {
        expect(scope.awsServices.length).toBe(3);
    });
});

% grunt test
・
・
Running "connect:test" (connect) task
Starting connect web server on localhost:9000.

Running "karma:unit" (karma) task
INFO [karma]: Karma server started at http://localhost:8080/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/syuta/srcs/nodeapps/ang/test/mock/**/*.js" does not match any file.
INFO [Chrome 27.0 (Mac)]: Connected on socket id BLZ4NFDhoDN1gXHljcd_
Chrome 27.0 (Mac): Executed 1 of 1 SUCCESS (0.127 secs / 0.024 secs)

Done, without errors.